{% extends 'base.html' %}
{% block headcontent %}
    <link rel="stylesheet" href="/static/fonts/css0f7c.css?family=Open+Sans:300,400,600,700,800">
    <link rel="stylesheet" href="/static/fonts/css1180.css?family=Quicksand:500,700">
    <link rel="stylesheet" type="text/css" href="/static/bower_components/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/pages/waves/css/waves.min.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/assets/icon/feather/css/feather.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/font-awesome-n.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bower_components/chartist/css/chartist.css" media="all">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/css/widget.css">

    <script type="text/javascript" src="/static/lib/3/amcharts.js"></script>
    <script type="text/javascript" src="/static/lib/3/serial.js"></script>
    <script type="text/javascript" src="/static/lib/3/light.js"></script>


{% endblock %}
{% block bodycontent %}
<div class="pcoded-content">
      <div class="page-header card">
        <div class="row align-items-end">
          <div class="col-lg-8">
            <div class="page-header-title">
              <i class="feather icon-home bg-c-blue"></i>
              <div class="d-inline">
                <h5>Dashboard</h5>
                <span>欢迎登陆 {{ loginuser }}</span>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="page-header-breadcrumb">
              <ul class=" breadcrumb breadcrumb-title">
                <li class="breadcrumb-item">
                  <a href="{% url 'index' %}">
                    <i class="feather icon-home"></i>
                  </a>
                </li>
                <li class="breadcrumb-item">
                  <a href="#">Dashboard</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="pcoded-inner-content">
        <div class="main-body">
          <div class="page-wrapper">
            <div class="page-body">
              <div class="row">
                <div class="col-md-12 col-xl-8">
                    <div class="card sale-card">

                    <div class="card-block">
                    <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
                    </div>
                    </div>
                </div> <!-- col-md-12 col-xl-8 -->


                <div class="col-md-12 col-xl-4">
                  <div class="card comp-card">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col">
                          <h6 class="m-b-25">Impressions</h6>
                          <h3 class="f-w-700 text-c-blue">1,563</h3>
                          <p class="m-b-0">May 23 - June 01 (2017)</p></div>
                        <div class="col-auto">
                          <i class="fas fa-eye bg-c-blue"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card comp-card">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col">
                          <h6 class="m-b-25">Goal</h6>
                          <h3 class="f-w-700 text-c-green">30,564</h3>
                          <p class="m-b-0">May 23 - June 01 (2017)</p></div>
                        <div class="col-auto">
                          <i class="fas fa-bullseye bg-c-green"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="card comp-card">
                    <div class="card-body">
                      <div class="row align-items-center">
                        <div class="col">
                          <h6 class="m-b-25">Impact</h6>
                          <h3 class="f-w-700 text-c-yellow">42.6%</h3>
                          <p class="m-b-0">May 23 - June 01 (2017)</p></div>
                        <div class="col-auto">
                          <i class="fas fa-hand-paper bg-c-yellow"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="col-xl-12">
                  <div class="card proj-progress-card">
                    <div class="card-block">
                      <div class="row">
                        <div class="col-xl-3 col-md-6">
                          <h6>Published Project</h6>
                          <h5 class="m-b-30 f-w-700">532
                            <span class="text-c-green m-l-10">+1.69%</span></h5>
                          <div class="progress">
                            <div class="progress-bar bg-c-red" style="width:25%"></div>
                          </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                          <h6>Completed Task</h6>
                          <h5 class="m-b-30 f-w-700">4,569
                            <span class="text-c-red m-l-10">-0.5%</span></h5>
                          <div class="progress">
                            <div class="progress-bar bg-c-blue" style="width:65%"></div>
                          </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                          <h6>Successfull Task</h6>
                          <h5 class="m-b-30 f-w-700">89%
                            <span class="text-c-green m-l-10">+0.99%</span></h5>
                          <div class="progress">
                            <div class="progress-bar bg-c-green" style="width:85%"></div>
                          </div>
                        </div>
                        <div class="col-xl-3 col-md-6">
                          <h6>Ongoing Project</h6>
                          <h5 class="m-b-30 f-w-700">365
                            <span class="text-c-green m-l-10">+0.35%</span></h5>
                          <div class="progress">
                            <div class="progress-bar bg-c-yellow" style="width:45%"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                <div class="col-md-12 col-xl-4">
                  <div class="card card-blue text-white">
                    <div class="card-block p-b-0">
                      <div class="row m-b-50">
                        <div class="col">
                          <h6 class="m-b-5">Sales In July</h6>
                          <h5 class="m-b-0 f-w-700">$2665.00</h5></div>
                        <div class="col-auto text-center">
                          <p class="m-b-5">Direct Sale</p>
                          <h6 class="m-b-0">$1768</h6></div>
                        <div class="col-auto text-center">
                          <p class="m-b-5">Referal</p>
                          <h6 class="m-b-0">$897</h6></div>
                      </div>
                      <div id="sec-ecommerce-chart-line" class="" style="height:60px"></div>
                      <div id="sec-ecommerce-chart-bar" style="height:195px"></div>
                    </div>
                  </div>
                </div>


             </div><!-- row -->
            </div><!-- page-body-->
          </div><!-- page-wrapper -->
        </div><!-- main-body -->
      </div>
</div>
{% endblock %}
{% block endcontent %}

    <script type="text/javascript" src="/static/bower_components/jquery/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/jquery-ui/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/popper.js/js/popper.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/assets/pages/waves/js/waves.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/jquery-slimscroll/js/jquery.slimscroll.js"></script>
    <script type="text/javascript" src="/static/assets/pages/chart/float/jquery.flot.js"></script>
    <script type="text/javascript" src="/static/assets/pages/chart/float/jquery.flot.categories.js"></script>
    <script type="text/javascript" src="/static/assets/pages/chart/float/curvedLines.js"></script>
    <script type="text/javascript" src="/static/assets/pages/chart/float/jquery.flot.tooltip.min.js"></script>
    <script type="text/javascript" src="/static/bower_components/chartist/js/chartist.js"></script>
    <script type="text/javascript" src="/static/assets/js/pcoded.min.js"></script>
    <script type="text/javascript" src="/static/assets/js/vertical/vertical-layout.min.js"></script>
    <script type="text/javascript" src="/static/assets/pages/dashboard/custom-dashboard.min.js"></script>
    <script type="text/javascript" src="/static/assets/js/script.min.js"></script>
    <script type="text/javascript" async src="/static/gtag/jsa055?id=UA-23581568-13"></script>

    <script type="text/javascript">
        $.get("/api/index/chart/",function(result){
            AmCharts.makeChart("chartdiv",

                {
                    "type": "serial",
                    "categoryField": "date",
                    "dataDateFormat": "YYYY-MM-DD HH",
                    "theme": "light",
                    "categoryAxis": {
                        "minPeriod": "hh",
                        "parseDates": true
                    },
                    "chartCursor": {
                        "enabled": true,
                        "categoryBalloonDateFormat": "JJ:NN"
                    },
                    "chartScrollbar": {
                        "enabled": true
                    },
                    "trendLines": [],
                    "graphs": [
                        {
                            "bullet": "round",
                            "id": "AmGraph-1",
                            "title": "访问量",
                            "valueField": "column-1",
                            "lineThickness": 4,
                            "lineColor": "#271d19",
                            
                        },
                        {
                            "bullet": "square",
                            "id": "AmGraph-2",
                            "title": "成交金额",
                            "valueField": "column-2",
                            "lineThickness": 4,
                            "lineColor": "#F45213",
                        },
                        {
                            "bullet": "round",
                            "id": "AmGraph-3",
                            "title": "下单量",
                            "valueField": "column-3",
                            "lineThickness": 4,
                            "lineColor": "#4099ff",
                            
                        },

                    ],
                    "guides": [],
                    "valueAxes": [
                        {
                            "id": "ValueAxis-1",
                            "title": "" //Y title
                        }
                    ],
                    "allLabels": [],
                    "balloon": {},
                    "legend": {
                        "enabled": true,
                        "useGraphSettings": true
                    },
                    "titles": [
                        {
                            "id": "Title-1",
                            "size": 15,
                            "text": ""   //table title
                        }
                    ],
                    "dataProvider": result
             }
            );
        });
        </script>



    <script type="text/javascript">
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }
      gtag('js', new Date());

      gtag('config', 'UA-23581568-13');</script>
    <script src="/static/cloudflare-static/rocket-loader.min.js" data-cf-settings="49" defer=""></script>
{% endblock %}
